<template>
  <div class="dashboard-container">
    <el-tag>主题</el-tag><span style="margin-left:20px">{{ postBarDetail.title }}</span>

    <div style="float:right;display:flex;flex-direction:row">
      <div class="heart" @click="clickLike()">
        <div class="l" />
        <div class="r" />
        <div class="z" />
      </div>
      点赞数:{{ postBarDetail.likeCount }}
      <span style="padding-left:20px">浏览量:{{ postBarDetail.pageViewCount }}</span>
      <span style="margin-left:20px">评论数:{{ postBarDetail.commentCount }}</span>
    </div>
    <el-divider />
    <div>
      <div v-for="(item,index) in replyList" :key="item.id" class="reply-list" :style="index===0?'border-top:1px solid #E5E5E5;':''">
        <div style="display:flex;flex-direction:row">
          <div class="reply-list-left">
            <img v-if="postBarDetail.landlordId === item.replyUserId" width="50" height="50" class="landlord-img" src="@/assets/images/landlord.png">
            <div style="display:flex;flex-direction:column">
              <img width="150" height="150" :src="'data:image/jpeg;base64,'+item.photoContent">
              <el-button type="text">姓名：{{ item.nickName }}</el-button>
            </div>
          </div>
          <div class="reply-list-right">
            <div class="reply-list-content">
              <div style="margin:30px">
                {{ item.replyContent }}
              </div>
            </div>
            <div class="reply-list-footer">
              <div class="reply-list-footer-content">{{ item.room }}楼
                <span style="margin-left:10px">{{ dayjs(item.replyTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                <!-- 这里通过document来修改回复还是收起 -->
                <el-link :id="`reply${item.id}`" type="primary" style="margin-left:10px;font-size:16px" @click="clickComment(item.id)">回复</el-link>
              </div>
              <!-- 评论列表 -->
              <div v-if="isShowComment(item.commentList)" style="width:90%;float:right">
                <el-card :id="`commentList${item.id}`" style="display:block" class="box-card">
                  <div v-for="(comment,commentIndex) in item.commentList" :key="comment.id" class="text item">
                    {{ comment.createTime }} <el-button type="text">{{ getNickName(comment.commentUserId) }}</el-button>{{ getCommentNickName(commentIndex,item.commentList) }}：{{ comment.commentContent }}
                    <el-button type="text" @click="replyComment(comment.id,replyList)">回复</el-button>
                    <div :id="`replyComment${comment.id}`" style="display:none">
                      <el-input
                        v-model="replyCommentContent"
                        style="width:80%;"
                        type="textarea"
                        :rows="1"
                        placeholder="请输入内容"
                      />
                    </div>
                    <el-button :id="`replyCommentBtn${comment.id}`" style="display:none" size="mini" type="primary" @click="handleReplyComment(item.id)">提交</el-button>
                  </div>
                </el-card>
              </div>

              <!-- 这里通过document来修改回复还是收起 -->
              <div :id="`commentContent${item.id}`" style="display:none">
                <div style="display:flex;justify-content:flex-end">
                  <el-input
                    v-model="commentContent"
                    style="width:80%"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                  />
                </div>
                <div style="display:flex;justify-content:flex-end">
                  <el-button type="primary" @click="commentSubmit(item.id)">回复</el-button>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
    <div style="margin-top:20px">
      <div style="font-size:18px">发表评论<i style="margin-left:10px" class="el-icon-edit" /></div>
      <el-input
        v-model="replyContent"
        style="margin-top:10px"
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
      />
      <el-button style="float:right;margin-top:10px;margin-bottom:20px" type="primary" @click="replySubmit()">发表</el-button>
    </div>
  </div>
</template>

<script>

import { getPostBarById, like, addReply, searchReply, addComment } from '@/api/communicate'
import { getUserInfo, getAllUser } from '@/api/user'

export default {
  name: 'CommunicateDetail',
  data() {
    return {
      landlordId: null,
      id: null,
      userList: [],
      postBarDetail: {},
      replyContent: '',
      commentContent: '',
      userInfo: {},
      replyList: [],
      replyCommentContent: '',
      replyCommentId: null
    }
  },
  computed: {
    getNickName() {
      return function(value) {
        // const findUser = this.userList.find(item => item.id === value)
        // return findUser ? findUser.nickName : ''
        return value
      }
    },
    isShowComment() {
      return function(value) {
        return value.length > 0
      }
    },
    getCommentNickName() {
      return function(index, list) {
        const isReplyComment = list[index].isReplyComment
        if (isReplyComment) {
          const byCommentId = list[index].byCommentId
          const findByComment = list.find(item => item.id === byCommentId)
          const findUser = this.userList.find(item => item.id === findByComment.commentUserId)
          return findUser ? ' 回复 ' + findUser.nickName : ''
        }
        return ''
      }
    }

  },

  mounted() {
    // 数据初始化
    this.init()
  },
  methods: {
    // 数据初始化
    init() {
      this.replyContent = ''
      const { id } = this.$route.query
      this.id = id
      // 这里用promise.all
      getUserInfo().then((res) => {
        this.userInfo = res
      })
      getPostBarById(id).then((res) => {
        this.postBarDetail = res
      })
      searchReply({ postBarId: id, pageNum: 1, pageSize: 10 }).then((res) => {
        this.replyList = res.list
      })
      getAllUser().then((res) => {
        this.userList = res
      })
    },
    // 点赞功能
    clickLike() {
      like(this.id).then(() => {
        this.postBarDetail.likeCount = this.postBarDetail.likeCount + 1
      })
    },
    // 回帖操作
    replySubmit() {
      const { id, userInfo, replyContent } = this
      if (replyContent.length > 0) {
        const data = { postBarId: id, replyUserId: userInfo.id, replyContent }
        addReply(data).then(() => {
          this.$message.success('回复成功')
          this.init()
        })
      } else {
        this.$message.error('回复内容不能为空')
      }
    },
    // 点击回复展示输入框
    clickComment(id) {
      console.log('111', id)
      if (document.getElementById(`commentContent${id}`).style.display === 'inline') {
        document.getElementById(`commentContent${id}`).style.display = 'none'
        document.getElementById(`commentList${id}`).style.display = 'block'
        document.getElementById(`reply${id}`).textContent = '回复'
      } else {
        this.replyList.forEach((item) => {
          if (id === item.id) {
            document.getElementById(`commentContent${item.id}`).style.display = 'inline'
            document.getElementById(`commentList${item.id}`).style.display = 'none'
            document.getElementById(`reply${item.id}`).textContent = '收起回复'
          } else {
            document.getElementById(`commentContent${item.id}`).style.display = 'none'
            document.getElementById(`commentList${item.id}`).style.display = 'block'
            document.getElementById(`reply${item.id}`).textContent = '回复'
          }
        })
      }
      this.commentContent = ''
    },
    // 提交评论
    commentSubmit(replyPostBarId) {
      const { userInfo, commentContent } = this
      if (commentContent.length > 0) {
        const data =
         {
           commentUserId: userInfo.id,
           commentContent,
           replyPostBarId,
           isReplyComment: false
         }
        addComment(data).then(() => {
          this.$message.success('评论成功')
          this.$router.go(0)
        })
      } else {
        this.$message.error('评论内容不能为空')
      }
    },
    replyComment(id, replyList) {
      replyList.forEach((item) => {
        if (item.commentList) {
          item.commentList.forEach((item2) => {
            document.getElementById(`replyComment${item2.id}`).style.display = 'none'
            document.getElementById(`replyCommentBtn${item2.id}`).style.display = 'none'
          })
        }
      })
      document.getElementById(`replyComment${id}`).style.display = 'inline'
      document.getElementById(`replyCommentBtn${id}`).style.display = 'inline'
      this.replyCommentId = id
    },
    // 提交回复评论
    handleReplyComment(replyPostBarId) {
      const { userInfo, replyCommentContent, replyCommentId } = this
      if (replyCommentContent.length > 0) {
        const data = {
          commentUserId: userInfo.id,
          commentContent: replyCommentContent,
          replyPostBarId,
          byCommentId: replyCommentId,
          isReplyComment: true
        }
        addComment(data).then(() => {
          this.$message.success('评论成功')
          this.$router.go(0)
        })
      }
      console.log('replyPostBarId', replyPostBarId)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}

.reply-list{
    border-left:1px solid #E5E5E5;
    border-right:1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    min-height:300px;
    position: relative;
}

.reply-list-left{
    width: 300px;
    height: 295px;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
}

.reply-list-right{
    width: 100%;
    position:relative;
}

.reply-list-content{
    width: 100%;
    height:200px;
    position:relative;
}

.reply-list-footer{
    right:0;
    bottom: 0;
    width:100%;
}

.reply-list-footer-content{
  display: flex;
  justify-content: flex-end;
}

.landlord-img{
    position:absolute;
    right: 0;
    top: 0;
    margin:0;
    padding:0;
}

.heart{
    width:20px;
    height: 20px;
    position: relative;
    animation: xt 1s linear infinite;
    margin-right: 20px;
}

.l{
    width:12px;
    height:12px;
    background: red;
    position: absolute;
    border-radius: 50%;
    left: 0;
    top: 0;
}

.r{
    width:12px;
    height:12px;
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
}

.z{
    width:12px;
    height:12px;
    background: red;
    transform: translate(4px,4px) rotate(45deg);
}

@keyframes xt{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.2);
    }
}
</style>
